<template>
  <div class="dashboard">
    <div class="banner">
      <div class="row">
        <div class="row-left">
          <h4></h4>
        </div>
        <div class="row-center">
          <h4>{{ line }} kanban </h4>
        </div>
        <div class="row-right">
          <h4>{{ timesDate }}</h4>
        </div>
      </div>
    </div>
    <div class="leftLay">
      <div class="leftLay-top">
        <img src="img/board/station7.png" class="png" alt />
      </div>
      <div class="leftLay-center">
        <div id="board_bar"></div>
      </div>
      <div class="leftLay-bottom1">
        <div id="board_bar2"></div>
      </div>
      <div class="leftLay-bottom2">
        <div id="board_bar3"></div>
      </div>
    </div>
    <div class="rightLay">
      <div class="rightLay-top">
        <div class="inner">
          <p><span>工单:</span> {{ woData.id }}</p>
          <p><span>产品:</span> {{ woData.name }}</p>
        </div>
        <div class="info">
          <div class="info-left-top">
            <p>计划数量</p>
            <hr class="line">
            <p>{{ woData.qty }}</p>
          </div>
          <div class="info-right-top">
            <p>投入数量</p>
            <hr class="line">
            <p>{{ woData.in }}</p>
          </div>
          <div class="info-left-bottom">
            <p>报废数量</p>
            <hr class="line">
            <p>{{ woData.scrap }}</p>
          </div>
          <div class="info-right-bottom">
            <p>产出数量</p>
            <hr class="line">
            <p>{{ woData.out }}</p>
          </div>
        </div>
      </div>
      <div class="rightLay-bottom">
        <div class="footerLay">
          <div class="footerLay-left-top">
            <h3>达成率</h3>
            <div class="label-blue">
              <h1>{{ (woData.out / woData.qty * 100).toFixed(1) }}<span>%</span></h1>
            </div>
          </div>
        </div>
        <div class="footerLay">
          <div class="footerLay-left-top">
            <h3>FTQ</h3>
            <div class="label-green">
              <h1>{{ passRate }}<span>%</span></h1>
            </div>
          </div>
        </div>
        <div class="footerLay">
          <div class="footerLay-left-top">
            <h3>OEE</h3>
            <div class="label-yellow">
              <h1>{{ lineOee }}<span>%</span></h1>
            </div>
          </div>
        </div>
        <div class="footerLay">
          <div class="footerLay-left-top">
            <h3>故障数</h3>
            <div class="label-red">
              <h1>{{ errorNum }}</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { dateFormat } from '@/utils/date'
import { getAction, httpAction } from '@api/manage'

const echarts = require('echarts')
export default {
  name: 'OrderScreen',
  data() {
    return {
      title: '测试看板',
      timesDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      nowDate: new Date(),
      url: {
        lineStatus: '/monitor/api/runCmd',
        getBoardData: '/board/lineBoard/getBoardData'
      },
      ftqxData: ['OP10', 'OP20', 'OP30', 'OP40', 'OP50', 'OP60', 'OP70', 'OP80', 'OP90'],
      ftqyData: [],
      avaxData: ['STN10', 'STN20', 'STN30', 'STN40', 'STN50', 'STN60', 'STN70', 'STN80', 'STN90'],
      avayData: [],
      perxData: [],
      peryData: [],
      passRate: 100,
      lineOee: 100,
      reachRate: 100,
      errorNum: 0,
      lineStatus: {},
      param: {
        line: 'C8_2E',
        wo: ''
      },
      // echarts的实例
      myChart: null,
      woData: {
        id: '',
        name: '',
        qty: 0,
        in: 0,
        out: 0
      },
      line: this.$route.query.line
    }
  },
  created() {
    this.getlineStatus()
    this.getLineBoardData()
    this.board_bar()
    this.board_bar2()
    this.board_bar3()
  },
  mounted() {
    //this.initCheck2();
    // 监听屏幕大小变化
    window.addEventListener('resize', this.screenAdatper)
    this.getlineStatus()
    this.getLineBoardData()
    this.board_bar()
    this.board_bar2()
    this.board_bar3()
    let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    setInterval(() => {
      _this.timesDate = dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss') // 修改数据date
      _this.nowDate += 1000
      console.log(dateFormat(_this.nowDate, 'yyyy-MM-dd hh:mm:ss'))
    }, 500)
    _this.currentTime()
  },
  beforeDestoryed() {
    // 组件销毁前移除监听,防止内存泄露
    window.removeEventListener('resize')
  },
  methods: {
    screenAdatper() {
      this.myChart && this.myChart.resize()
    },
    // 根据不同的屏幕宽度换算字体大小
    transformFontSize(fontsize) {
      const width = window.screen.width
      const ratio = width / 1920
      return parseInt(fontsize * ratio)
    },

    getlineStatus() {
      this.lineStatus = {
        serviceid: 'mes',
        cmd: 'lineStatus',
        entityid: this.line,
        clientid: this.line + ';;',
        wo: 0,
        stn: 0,
        shift: '0',
        cpk: 0,
        log: 0
      }
      httpAction(this.url.lineStatus, this.lineStatus, 'post').then((res) => {
        if (res.success) {
          let wo = JSON.parse(res.result.data.wo)
          let cpk = JSON.parse(res.result.data.cpk)
          let xdata = []
          let ydata = []
          cpk.forEach(function(value, key) {
            for (var key2 in value) {
              xdata.push(key2)
              ydata.push(value[key2])
            }
          })
          this.cpkxData = xdata
          this.cpkyData = ydata
          this.woData = wo[0]
          this.reachRate = this.woData.out / this.woData.qty
          this.param.wo = this.woData.id
          this.param.line = this.line
        } else {
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    },

    getLineBoardData() {
      let that = this
      var ftqxData = []
      var ftqyData = []
      var avaxData = []
      var avayData = []
      var perxData = []
      var peryData = []
      getAction(this.url.getBoardData, this.param).then((res) => {
        let ftq = res.result.ftq
        let ava = res.result.availability
        let per = res.result.performance
        this.passRate = res.result.passRate
        this.lineOee = res.result.lineOee
        this.errorNum = res.result.errorNum
        ftq.forEach(item => {
          ftqxData.push(item.name)
          ftqyData.push(item.value)
        })
        ava.forEach(item => {
          avaxData.push(item.name)
          avayData.push(item.value)
        })
        per.forEach(item => {
          perxData.push(item.name)
          peryData.push(item.value)
        })
        that.ftqxData = ftqxData
        that.ftqyData = ftqyData
        that.avaxData = avaxData
        that.avayData = avayData
        that.perxData = perxData
        that.peryData = peryData
      }).finally(() => {

      })
    },
    board_bar() {
      let that = this
      var chartDom = document.getElementById('board_bar')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: 'FTQ',
          left: 'center',
          textStyle: {
            fontWeight: 'bold',
            color: '#fff',
            fontSize: this.transformFontSize(25)
          }
        },
        legend: {
          left: 'left',
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: this.transformFontSize(10)
          }
        },
        tooltip: {},
        grid: {
          right: '5%',
          left: '5%',
          bottom: '14%'
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#fff',
            fontSize: this.transformFontSize(15)
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: that.ftqxData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
            fontSize: this.transformFontSize(15)
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {                                //网格线
            show: true,                                  //是否显示
            lineStyle: {                                //网格线样式
              color: '#9AA5A0FF',                        //网格线颜色
              width: 1,                                //网格线的加粗程度
              type: 'dashed'                            //网格线类型
            }
          }
        },

        series: [
          {
            name: '本工单各工位一次合格率数据统计',
            type: 'bar',
            barWidth: '30%',
            color: 'rgb(78,123,225)',
            label: {
              show: true,
              formatter: function(param) {
                return param.value + '%'
              },
              position: 'top',
              textStyle: {
                color: '#fff',
                fontWeight: 'bold',
                fontSize: this.transformFontSize(15)
              }
            },
            data: that.ftqyData
          }
        ]
      }
      option && myChart.setOption(option)
    },
    board_bar2() {
      let that = this
      var chartDom = document.getElementById('board_bar2')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: 'OEE',
          left: 'center',
          textStyle: {
            fontWeight: 'bold',
            color: '#fff',
            fontSize: this.transformFontSize(25)
          }
        },
        legend: {
          left: 'left',
          show: true,
          x: 1000,
          textStyle: {
            color: '#fff',
            fontSize: this.transformFontSize(10)
          }
        },
        tooltip: {},
        grid: {
          right: '5%',
          left: '5%',
          bottom: '14%'
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#fff',
            fontSize: this.transformFontSize(15)
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: that.oeexData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
            fontSize: this.transformFontSize(15)
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {                                //网格线
            show: true,                                  //是否显示
            lineStyle: {                                //网格线样式
              color: '#9AA5A0FF',                        //网格线颜色
              width: 1,                                //网格线的加粗程度
              type: 'dashed'                            //网格线类型
            }
          }
        },

        series: [
          {
            name: '当日各工站设备OEE: 时间开动率*合格品率',
            type: 'bar',
            barWidth: '30%',
            color: 'rgb(101,104,224)',
            label: {
              show: true,
              formatter: function(param) {
                return param.value + '%'
              },
              position: 'top',
              textStyle: {
                color: '#fff',
                fontWeight: 'bold',
                fontSize: this.transformFontSize(15)
              }
            },
            data: that.oeeyData
          }
        ]
      }
      option && myChart.setOption(option)
    },
    board_bar3() {
      var chartDom = document.getElementById('board_bar3')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: 'CPK',
          left: 'center',
          textStyle: {
            fontWeight: 'bold',
            color: '#fff',
            fontSize: this.transformFontSize(25)
          }
        },
        legend: {
          left: 'left',
          show: true,
          x: 1000,
          textStyle: {
            color: '#fff',
            fontSize: this.transformFontSize(10)
          }
        },
        tooltip: {},
        grid: {
          right: '5%',
          left: '5%',
          bottom: '14%'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: this.cpkxData
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {                                //网格线
            show: true,                                  //是否显示
            lineStyle: {                                //网格线样式
              color: '#9AA5A0FF',                        //网格线颜色
              width: 1,                                //网格线的加粗程度
              type: 'dashed'                            //网格线类型
            }
          }
        },

        series: [
          {
            name: '本工单生产数据关键参数CPK值',
            type: 'bar',
            barWidth: '30%',
            color: 'rgb(123, 104, 238)',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
                fontWeight: '4vmin'
              }
            },
            data: this.cpkyData
          }
        ]
      }
      option && myChart.setOption(option)
    },
    //定时任务
    currentTime() {
      //定时任务，10s刷新
      const kanban = setInterval(() => {
        this.getlineStatus()
        this.getLineBoardData()
        this.board_bar()
        this.board_bar2()
        this.board_bar3()
      }, 5000)
      //监听离开页面，定时任务销毁
      window.addEventListener('popstate', function(e) {
        clearInterval(kanban)
      }, false)
    }
    //生成测试一图表

  }
}
</script>
<style scoped>

html, .dashboard {
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  font-family: '微软雅黑' !important;
}

.dashboard {
  width: 100%;
  height: 100%;
  position: relative;
  /*background-color: #0c1016;*/
  background-color: #517485;
}

.dashboard, .dashboard h1, .dashboard h2, .dashboard h3, .dashboard h4, .dashboard h5, .dashboard h6 {
  font-weight: 900 !important;
  color: #e84e0f;
  text-align: center;
}

.footerLay h1 {
  font-size: 3vmin;
  /*position: absolute;*/
  /*top: 50%;*/
  /*margin-top: 30%;*/
  /*margin-bottom: 30%;*/
}

h3 {
  font-size: 3vmin;
  color: #5865B5 !important;
  margin-top: 4%;
  margin-bottom: 2%;
}

h4 {
  font-size: 3vmin;
  margin-top: 3%;
}

.banner {
  height: 7.5%;
  color: #5865B5;
}

.row {
  color: #5865B5;
}

.row h4 {
  font-size: 4vmin;
}

.row-left {
  width: 33%;
  height: 100%;
  color: #5865B5;
  float: left;
}

.row-center {
  width: 33%;
  height: 100%;
  color: #5865B5;
  float: left;
}

.row-right {
  width: 33%;
  height: 100%;
  color: #5865B5;
  float: right;
}

.leftLay {
  padding-top: 0.5%;
  width: 70%;
  height: 92%;
  float: left;
  background-color: #0c1016;
}

img {
  height: 100%;
  width: 100%;
  display: flex;
  text-align: center;
}

.leftLay-top {
  width: 100%;
  height: 25%;
}

.leftLay-center {
  padding-top: 0.5%;
  width: 100%;
  height: 36%;
}

.leftLay-bottom1 {
  padding-top: 1%;
  width: 100%;
  height: 36%;
}

.leftLay-bottom2 {
  padding-top: 1%;
  width: 100%;
  height: 0%;
}

.rightLay {
  padding-top: 0.5%;
  padding-left: 0.5%;
  width: 30%;
  height: 92%;
  float: right;
  background-color: #0c1016;
}

.rightLay-top {
  width: 100%;
  height: 50%;
  background-color: rgb(123, 104, 238);
}

.inner {
  height: 30%;
  width: 100%;
  text-align: center;
  font-size: 3vmin;
  padding-top: 3%;
  color: white;
}

.inner p {
  font-size: 4vmin;
  margin-bottom: 0;
}

.footerLay h3 {
  font-size: 3vmin;
}

.info {
  height: 70%;
  width: 100%;
  text-align: center;
  font-size: 2vmin;
  color: white;
}

.info p {
  font-size: 4vmin;
  margin-bottom: 0;
}

.line {
  border: 0.5px dashed #fff;
  margin: 3px 0 3px 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  text-align: center;
  display: block;
  unicode-bidi: isolate;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;
}

.info-left-top, .info-left-bottom {
  top: 50%;
  bottom: 50%;
  height: 50%;
  width: 50%;
  padding-right: 2%;
  float: left;
}

.info-right-top, .info-right-bottom {
  top: 50%;
  bottom: 50%;
  height: 50%;
  width: 50%;
  padding-left: 2%;
  float: right;
}

.rightLay-bottom {
  padding-top: 1%;
  width: 100%;
  height: 49%;
}

.rightLay-bottom span {
  color: #fff;
  font-size: 1vmin;
}

#board_bar {
  border-width: 3px;
  border-color: black;
  border-style: solid;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

#board_bar2 {
  border-width: 3px;
  border-color: black;
  border-style: solid;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

#board_bar3 {
  border-width: 3px;
  border-color: black;
  border-style: solid;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

.footerLay {
  position: relative;
}

.footerLay-left-top {
  width: 50%;
  height: 50%;
  float: left;
  /*margin: auto;*/
  padding-top: 3%;
}

.label-blue {
  width: 12vh;
  height: 12vh;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(135, 206, 255, 0.7);
  color: #87CEFF;
  border-radius: 50%;
  box-shadow: 0 -5px 5px 0 rgb(135 206 255 / 20%), -5px 0 5px 0 rgb(135 206 255 / 20%), 5px 0 5px 0 rgb(135 206 255 / 20%), 0 5px 5px 0 rgb(135 206 255 / 20%);
}

.label-blue h1 {
  color: #87CEFF;
}

.label-red {
  width: 12vh;
  height: 12vh;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(238, 0, 0, 0.7);
  color: #e00;
  box-shadow: 0 -5px 5px 0 rgb(238 0 0 / 20%), -5px 0 5px 0 rgb(238 0 0 / 20%), 5px 0 5px 0 rgb(238 0 0 / 20%), 0 5px 5px 0 rgb(238 0 0 / 20%);
}

.label-red h1 {
  color: #e00;
}

.label-green {
  width: 12vh;
  height: 12vh;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(192, 255, 62, 0.7);
  color: #C0FF3E;
  box-shadow: 0 -5px 5px 0 rgb(192 255 62 / 20%), -5px 0 5px 0 rgb(192 255 62 / 20%), 5px 0 5px 0 rgb(192 255 62 / 20%), 0 5px 5px 0 rgb(192 255 62 / 20%);
}

.label-green h1 {
  color: #C0FF3E;
}

.label-yellow {
  width: 12vh;
  height: 12vh;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 200, 70, 0.7);
  color: #ffc846;
  box-shadow: 0 -5px 5px 0 rgb(255 200 70 / 20%), -5px 0 5px 0 rgb(255 200 70 / 20%), 5px 0 5px 0 rgb(255 200 70 / 20%), 0 5px 5px 0 rgb(255 200 70 / 20%);
}

.label-yellow h1 {
  color: #ffc846;
}
</style>

